import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { argTypesView } from "./helpers/helpers";

export const terminalDocs= { source: { code: `details := component.TerminalDetails{
		Container: container,
		Command:   "/bin/sh",
		Active:    true,
	}
term := component.NewTerminal(pod.Namespace, "Terminal", pod.Name, containers, details)`
}}

export const terminalView = {
  config: {
    name: 'example',
    namespace: 'default',
    podName: 'nginx-pod',
    containers: ['nginx', 'nginx-sidecar'],
    terminal: {
      container: 'nginx',
      command: '/bin/sh',
      active: false,
    },
  },
  metadata: {
    type: 'terminal',
  },
};

export const TerminalStoryTemplate = args => ({
  template: `<app-terminal [view]= "view"></app-terminal>`,
  argTypes: argTypesView,
  props: { view: args.view },
});

<h1>Terminal component</h1>
<h2>Description</h2>

<p>The Terminal component is used to display a terminal.
The terminal is connected to a container on specified pod.
Once connection is established,
user can start typing shell commands and interact with the remote terminal.</p>
<h2>Example</h2>

<Meta title="Components/Terminal" argTypes = { argTypesView } />

<Canvas withToolbar>
<Story name="Terminal component"
       parameters={{ docs: terminalDocs }}
       args= {{ view: terminalView }}>
  { TerminalStoryTemplate.bind({}) }
</Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Terminal component" />
